<template>
  <!-- 菜单商品组件 -->
  <div class="product">
    <div @click="goDetail(data)"><img class="auto-img" :src="data.smallImg" alt=""></div>
    <div class="pro-zhname one-text">{{data.name}}</div>
    <div class="pro-enname one-text">{{data.enname}}</div>
    <div class="extend">
      <div class="pro-price">&yen;{{data.price}}</div>
      <slot></slot>
    </div>
  </div>
</template>





<script>
export default {
  name: "Product",
  
  // 获取父组件传递过来的数据
  props: {
    data: {
      type: Object,
      // 当默认值为引用类型时，default必须是一个工厂模式
      default() {
        return {};
      },
    },
  },

  methods: {
    // 去商品详情页
    goDetail(item) {
      // 
      this.$router.push({name: 'Detail', query: {
        pid: item.pid
      }});
    },
  }
};
</script>





<style lang="less" scoped>
.product {
  .pro-zhname {
    margin: 10px 0 3px 0;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .pro-enname {
    margin-bottom: 7px;
    color: #999;
  }
  .pro-price {
    flex: 1;
    color: #e4393c;
    font-size: 14px;
    font-weight: bold;
  }
  .extend {
    display: flex;
    align-items: center;
  }
}
</style>